<template>
  <div
    id="btn"
    :style="{
              backgroundColor:styles.colorBg,
               marginTop:styles.marginTop+'px',
                marginBottom:styles.marginBottom+'px',
                 marginLeft:styles.marginLR+'px',
                  marginRight:styles.marginLR+'px',
                  borderRadius:styles.circle+'px'
            }"
  >
    <p class="titles">{{styles.title}}</p>
    <ul v-if="styles.arrange==1" class="btn-list">
      <li
        v-for="(v,i) in styles.btnList"
        :key="i"
        :style="{width:styles.num==3?'33.33%':styles.num==4?'25%':'20%'}"
      >
        <div>
          <el-image :style="{width: styles.width+'px', height: styles.width+'px'}" :src="v.img==''?img:v.img" fit="cover"></el-image>
        </div>
        <span :style="{color:styles.colorWord,fontSize:styles.fontSize+'px'}">{{v.word}}</span>
      </li>
    </ul>
    <ul class="btn-list2" v-else>
      <li v-for="(v,i) in styles.btnList" :key="i">
        <div>
          <el-image :style="{width: styles.width+'px',height: styles.width+'px',marginRight:'10px'}" :src="v.img==''?img:v.img" fit="cover"></el-image>
          <span :style="{color:styles.colorWord,fontSize:styles.fontSize+'px'}">{{v.word}}</span>
        </div>
        <div>
          <span>查看</span>
          <el-image style="width: 20px; height: 20px;margin-left:5px" :src="img2" fit="cover"></el-image>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
export default {
  name: "btn",
  data() {
    return {
      img: require("../../../assets/img/blank.png"),
      img2: require("../../../assets/img/right.png"),
    };
  },
  props: ["styles"],
  watch: {},
  mounted() {},
  methods: {
    group(list, num) {
      let index = 0;
      let newArray = [];
      while (index < list.length) {
        newArray.push(list.slice(index, (index += num)));
      }

      return newArray;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-carousel__indicators--outside {
  display: none;
}
.titles {
  font-size: 16px;
  margin-left: 20px;
  font-weight: bold;
}
#btn {
  border-radius: 10px;

  .btn-list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 10px 0 0;
    > li:last-child {
      margin-bottom: 0;
    }
    > li {
      width: 20%;
      text-align: center;
      margin-bottom: 15px;
      > div {
        margin: 0 auto 10px;
        border-radius: 10px;
        overflow: hidden;
      }
      > span {
        font-size: 10px;
        color: #999;
      }
    }
  }
  .btn-list2{
    padding: 20px;
    >li:last-child{
      margin-bottom: 0;
    }
    >li{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      >div{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        span{
          color: #999;
        }
      }
    }
  }
}
</style>
